<template>
    <NavBar title="业绩详情" :isBack="true" bgColor="#fe292b" />

    <view class="detail-content">
        <view class="detail-top">
            <view class="detail-head">
                <view class="detail-info">
                    <image :src="state.avatar || getImgOssUrl('/ui-prod-2.7.0/avatar.png')" class="detail-main"></image>
                    <view class="detail-col">
                        <text class="detail-name">{{ state.nickname }}</text>
                        <text class="detail-time">{{ state.payTime }}</text>
                    </view>
                </view>
                <view class="detail-status">
                    {{ translateOrderCode(state.orderStatus, state.isSelfPickup, 1) }}
                </view>
            </view>
        </view>
        <view class="detail-all">
            <view class="detail-list" v-for="(item, index) in state.goods" :key="index">
                <view class="detail-goods">
                    <image :src="item.goodsImg" class="detail-photo"></image>
                    <view class="detail-between">
                        <view class="detail-width">
                            <text class="detail-two">{{ item.goodsName }}</text>
                        </view>
                        <text class="detail-sku">{{ item.skuValue }}</text>
                    </view>
                </view>
                <view class="detail-between detail-end">
                    <text class="detail-money">￥{{ floatDivide(item.skuPrice, 100) }}</text>
                    <text class="detail-sku">x{{ item.buyNum }}</text>
                    <text class="detail-red detail-money">实付￥{{ floatDivide(item.sellAmount, 100) }}</text>
                </view>
            </view>
            <view class="detail-float">
                <text class="detail-back">商品已退款￥{{ floatDivide(state.backMoney, 100) }}</text>
            </view>
            <view class="detail-line"></view>
            <view class="detail-float detail-color">
                赚：{{ state.benefitMode == 2 ? '￥' : '' }}{{ floatDivide(state.performance, 100)
                }}{{ state.benefitMode == 1 ? '积分' : '' }}
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import request from '@/request';
import NavBar from '@/components/navBar';
import { checkToken, getImgOssUrl, floatDivide, translateOrderCode } from '@/commons/utils';
const state = reactive({
    nickname: '', //昵称
    avatar: '', //头像=
    img: '', //商品图片
    goodsName: '', //商品名称
    benefitMode: 1, //佣金发放方式 1-积分 2-现金
    orderStatus: '', //1-待发货、2-待收货、3-已收货、4-已完成、5-已关闭
    payTime: '', //支付成功时间
    orderAmount: '', //订单金额
    performance: '', //佣金
    backMoney: 0,
    goods: []
});
const props = defineProps({
    orderId: {
        type: Number,
        default: 0
    }
});
onShow(() => {
    getIntegralList();
});
const getIntegralList = async () => {
    let res = await request('performanceDetail', { orderId: props.orderId });
    res.data.goods && res.data.goods.map(item => (item = Object.assign(item, { skuValue: '' })));
    res.data.goods &&
        res.data.goods.forEach(item => {
            state.backMoney += item.refundAmount;
            let skuArr = [];
            (item.specAttr || []).forEach(val => skuArr.push(val.attributeValue));
            item.skuValue = skuArr.join(';');
        });
    Object.assign(state, res.data);
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
